<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 注册</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #66BB6A;
            --light-gray: #F5F5F5;
            --text-color: #212121;
            --sub-text: #757575;
            --input-border: #E0E0E0;
            --focus-shadow: rgba(76, 175, 80, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-gray);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .login-container {
            background-color: white;
            padding: 2.5rem 2rem;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 360px;
        }

        h2 {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--text-color);
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .form-group input {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 2px solid var(--input-border);
            border-radius: 12px;
            font-size: 0.95rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px var(--focus-shadow);
        }

        .form-group input::placeholder {
            color: #BDBDBD;
        }

        .btn {
            width: 100%;
            padding: 1rem;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            background-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
            cursor: pointer;
        }

        .btn:hover {
            background-color: var(--secondary-color);
        }

        .btn:active {
            transform: scale(0.98);
        }

        .password-strength {
            font-size: 0.85rem;
            color: var(--sub-text);
            margin-top: 0.5rem;
            display: block;
        }

        .password-weak { color: #FF4444; }
        .password-medium { color: #FFB400; }
        .password-strong { color: #00C851; }
    </style>
</head>
<body>
    <div class="login-container">
        <form id="register-form">
            <h2>注册新账号</h2>
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="register-username" required placeholder="1-20位，支持中英文、数字、下划线">
            </div>
            <div class="form-group">
                <label>注册邮箱</label>
                <input type="email" id="register-email" required placeholder="请输入有效邮箱（如user@example.com）">
            </div>
            <div class="form-group">
                <label>登录密码</label>
                <input type="password" id="register-password" required placeholder="6-20位，包含大小写字母和数字">
                <span id="password-strength" class="password-strength"></span>
            </div>
            <div class="form-group">
                <label>确认密码</label>
                <input type="password" id="register-confirm-password" required placeholder="请再次输入密码">
            </div>
            <button type="submit" class="btn">立即注册</button>
        </form>
    </div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const users = JSON.parse(localStorage.getItem('users')) || [];
        const registerForm = document.getElementById('register-form');
        const registerPassword = document.getElementById('register-password');
        const passwordStrength = document.getElementById('password-strength');
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const usernameRegex = /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,20}$/;

        registerPassword.addEventListener('input', function () {
            const password = this.value;
            const hasUpperCase = /[A-Z]/.test(password);
            const hasLowerCase = /[a-z]/.test(password);
            const hasNumber = /\d/.test(password);
            const lengthValid = password.length >= 6 && password.length <= 20;

            if (!lengthValid) {
                passwordStrength.textContent = '❌ 密码长度需在6-20位之间';
            } else if (!(hasUpperCase && hasLowerCase && hasNumber)) {
                passwordStrength.textContent = '❌ 密码需包含大写字母、小写字母和数字';
                passwordStrength.className = 'password-strength password-weak';
            } else {
                passwordStrength.textContent = '✅ 密码强度：强';
                passwordStrength.className = 'password-strength password-strong';
            }
        });

        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('register-username').value;
            const email = document.getElementById('register-email').value;
            const password = registerPassword.value;
            const confirmPassword = document.getElementById('register-confirm-password').value;

            if (!usernameRegex.test(username)) {
                alert('用户名需为1-20位，支持中英文、数字、下划线');
                return;
            }
            if (!emailRegex.test(email)) {
                alert('请输入有效的邮箱地址');
                return;
            }
            if (!/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{6,20}$/.test(password)) {
                alert('密码需为6-20位，包含大写字母、小写字母和数字');
                return;
            }
            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }
            if (users.some(u => u.email === email)) {
                alert('该邮箱已注册，请更换邮箱');
                return;
            }

            users.push({ name: username, email, password });
            localStorage.setItem('users', JSON.stringify(users));
            alert('注册成功，请登录');
            window.location.href = 'login.html';
        });
    });
</script>
</body>
</html>